<template>
	<ul class="pagination">
		<!-- <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li> -->
		<li :class="curPage == 1 ? 'disable' : ''">
			<a href="javascript:;" @click="goPage(curPage-1)" v-if="curPage!=1">上一页</a>
			<a href="javascript:;" v-else>上一页</a>
		</li>
		<li v-if='curPage > 3'>
			<a href="javasciprt:;">...</a>
		</li>
		<li :class="{ active: curPage == item }" :key='index' v-for="(item,index) in list">
			<a href="javascript:;" @click="goPage(item)">{{ item}}</a>
		</li>
		<li v-if='curPage < pages - 3'>
			<a href="javasciprt:;">...</a>
		</li>
		<li :class="curPage == pages? 'disable' : ''">
			<a href="javascript:;" @click="goPage(curPage+1)" v-if="curPage!=pages">下一页</a>
			<a href="javascript:;" v-else>下一页</a>
		</li>
	</ul>
</template>

<script setup>
	import {
		ref,
		reactive,
		computed,
		defineProps,
		defineEmits
	} from 'vue'
	const props = defineProps({
		size: {
			type: Number,
			default: 10
		},
		page: {
			type: Number,
			default: 1
		},
		total: {
			type: Number,
			default: 0
		}
	})
	const emits = defineEmits(['change'])

	const pages = computed(() => Math.ceil(props.total / props.size))

	console.log(pages, '7777')
	const curPage = ref(props.page)

	const list = computed(() => {
		// 当父组件传递total的值发生变化时，计算属性会重新计算
		// pages = Math.ceil(props.total / props.pagesize)
		const result = []
		// 总页码小于等于5；大于5
		if (pages.value <= 5) { //小于5
			// 总页码小于等于5的情况
			for (let i = 1; i <= pages.value; i++) {
				result.push(i)
			}
		} else {
			// 总页码大于5
			if (curPage.value <= 2) {
				// 左侧临界值
				for (let i = 1; i <= 5; i++) {
					result.push(i)

				}
			} else if (curPage.value >= pages.value - 1) {
				// 右侧临界值
				for (let i = pages.value - 4; i <= pages.value; i++) {
					result.push(i)
				}
			} else {
				// 中间的状态
				for (let i = curPage.value - 2; i <= curPage.value + 2; i++) {
					result.push(i)
				}
			}
		}

		console.log('result000', result)
		return result
	})


	// 控制上一页和下一页变化
	const goPage = (page) => {
		curPage.value = page;
		emits('change', page)
	}
</script>

<style>
	.disable>a {
		cursor: not-allowed;
	}
</style>
